<template>
  <div class="groups">
    <div class="header">
      <!-- <img :src="headerImg" /> -->
      <video :src="headerImg" controls preload></video>
      <div class="img_content flex_space">
        <!-- <van-button plain hairline type="danger">细边框按钮</van-button> -->
        <div class="title">报名报名报名报名</div>
        <!-- <button class="btn" @click="signUp">报名</button> -->
        <van-button size="mini" type="primary" @click="signUp">报名</van-button>
      </div>
    </div>
    <div class="content">
      <div class="tag_group flex_space">
        <van-tag plain v-for="item of tag" :key="item">{{item}}</van-tag>
        <div class="flex_start">
          <div class="tip">浏览：{{liulan}}人</div>
          <div class="tip">报名：{{pinlin}}人</div>
        </div>
      </div>
      <div class="min_title">位置及周边</div>
      <div class="container">
        <el-amap vid="amap" :zoom="zoom" :center="center" :plugin="plugin"></el-amap>
      </div>
      <div class="min_title">楼盘详情</div>
      <div class="room_group">
        <div class="room">
          <div class="flex_start">
            <div class="title_room">楼盘名称：</div>
            <div>{{room.name}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">建筑形态：</div>
            <div>{{room.status}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">物业公司：</div>
            <div>{{room.ltd}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">装修情况：</div>
            <div>{{room.decorate}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">总户数：</div>
            <div>{{room.allhouseholds}}户</div>
          </div>
          <div class="flex_start">
            <div class="title_room">住宅特色：</div>
            <div>{{room.features}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">开发商：</div>
            <div>{{room.developers}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">物业费：</div>
            <div>{{room.property}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">车位比：</div>
            <div>{{room.space}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">绿化率：</div>
            <div>{{room.greening}}</div>
          </div>
          <div class="flex_start">
            <div class="title_room">占地面积：</div>
            <div>{{room.area}}</div>
          </div>
        </div>
      </div>
      <div class="min_title">网友评论</div>
      <div class="room_group">
        <div :class="list.length>1?'list':'list_border'" v-for="item in list" :key="item.id">
          <div class="flex_start">
            <img :src="item.img" class="headImg">
            <div class="text">
              <span class="text_name">{{item.name}}</span>
            </div>
          </div>
          <div class="text_content">{{item.signature}}</div>
          <div class="text_tip flex_space">
            <div class="min_text">{{item.time}}</div>
            <div class="flex_start">
              <div class="min_text">评论：{{item.pinlun}}</div>
              <div class="min_text">评论：{{item.zan}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="min_title">猜你喜欢</div>
      <div class="flex_start me_like">
        <div class="room_list" v-for="item of roomList" :key="item.id">
          <img :src="item.img">
          <div class="list_name">{{item.name}}</div>
          <div class="flex_start">
            <div class="price">{{item.price}}</div>
            <div class="price_tip">
              元/m
              <sup>2</sup>
            </div>
          </div>
          <div class="min_text">{{item.sign}}人均报名</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <input placeholder="请输入评论">
      <van-button plain type="primary">提交</van-button>
    </div>
  </div>
</template>
<script>
import { Button, Tag, Icon } from 'vant'
export default {
  components: {
    [Button.name]: Button,
    [Tag.name]: Tag,
    [Icon.name]: Icon
  },
  data() {
    let self = this
    return {
      id: '',

      headerImg:
        'https://ksv-video-publish.cdn.bcebos.com/0c30185e645d6b146ea329d2b20390519318641d.mp4?auth_key=1560940712-0-0-bb28984766dc5c328b9e414e914dbccb',
      tag: ['公园房', '地铁旁', '学区房'],
      liulan: 44,
      pinlin: 66,
      zoom: 16,
      center: [116.397428, 39.90923],
      plugin: [
        {
          pName: 'Geolocation',
          events: {
            init(o) {
              o.getCurrentPosition((status, result) => {
                if (result && result.positon) {
                  self.lng = result.positon.lng
                  self.lat = result.positon.lat
                  self.center = [self.lng, self.lat]
                  self.loaded = true
                  self.$naxtTick()
                }
              })
            }
          }
        }
      ],
      room: {
        name: '三里花城',
        status: '高层',
        ltd: '成都双流百信物业管理有限责任公司',
        decorate: '清水',
        allhouseholds: '2860',
        features: '人脸识别系统、地铁上盖',
        developers: '富豪实业有限公司',
        property: '2.6元/㎡•月',
        space: '1:1.73',
        greening: '30%',
        area: '207亩'
      },
      list: [
        {
          id: 0,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092455_98714.jpg',
          name: '艰辛',
          signature: '这个楼盘什么时候开盘啊',
          time: '2019年5月12日',
          pinlun: 10,
          zan: 10
        },
        {
          id: 1,
          img: 'http://img.sccnn.com/bimg/338/29147.jpg',
          name: '男男女女',
          signature: '这个小区看着还可以',
          time: '2019年5月12日',
          pinlun: 10,
          zan: 10
        }
      ],
      roomList: [
        {
          id: 0,
          name: '东原阅墅',
          sign: 88888,
          img:
            'https://ke-image.ljcdn.com/newhouse-user-image/43a77c4020d89fe8449b2070d7143b57.jpg.592x432.jpg',
          price: 111111
        }
      ],
      rommDatis: ''
    }
  },
  mounted: function() {},
  methods: {
    signUp() {
      this.$router.push({
        path: '/signUp'
      })
    }
  }
}
</script>
<style lang="less" scoped>
.groups {
  padding-bottom: 100px !important;
  .header {
    position: relative;
    width: 100%;
    height: 200px;
    video {
      width: 100%;
      height: 200px;
      position: absolute;
      top: 0;
    }
    .img_content {
      width: 100%;
      position: absolute;
      top: 20px;
      padding: 0 10px;
      box-sizing: border-box;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .title {
        width: 100%;
        text-align: center;
        font-size: 14px;
      }
      .btn {
        width: 60px;
        height: 30px;
        background-color: transparent;
        border: 1px solid red;
        border-radius: 3px;
        font-size: 13px;
        line-height: 25px;
        cursor: pointer;
      }
    }
  }
  .content {
    padding: 0 10px;
    box-sizing: content-box;
    .tag_group {
      margin-top: 10px;
      margin-bottom: 10px;
      .van-tag {
        margin-right: 5px;
      }
    }
  }
  .container {
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
  }
  .room_group {
    background-color: #ffffff;
    padding: 10px 10px;
    box-sizing: border-box;
    margin-bottom: 5px;
    .room {
      margin-bottom: 5px;
      font-size: 14px;
      .title_room {
        text-align: right;
        width: 100px;
        font-size: 14px;
        color: #999999;
        margin-right: 10px;
      }
    }
  }

  .list,
  .list_border {
    width: 100%;
    padding: 5px 5px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    background: #fff;
    .headImg {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    .text_tip {
      width: 100%;
    }
    .text {
      margin-left: 5px;
      display: flex;
      flex-direction: column;
      .text_name {
        font-size: 14px;
        display: inline-block;
        margin-top: 10px;
      }
    }
    .text_content {
      font-size: 14px;
      color: #bcb9b7;
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }
  .list_border {
    border-bottom: none;
  }
  .me_like {
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 100px;
    .room_list {
      img {
        width: 120px;
        height: 80px;
      }
      .price {
        font-size: 18px;
        color: red;
      }
      .price_tip {
        font-size: 10px;
        color: red;
      }
    }
  }
}
.flex_start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.flex_space {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.tip {
  font-size: 12px;
  color: #e0e0de;
  margin-right: 5px;
}
.min_title {
  font-size: 14px;
  color: #bcb9b7;
  margin-bottom: 5px;
}
.min_text {
  font-size: 12px;
  color: #9da2ad;
  margin-top: 2px;
  margin-bottom: 2px;
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 50px;
  height: 50px;
  border-top: 1px solid #e5e5e5;
  padding: 10px 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  input {
    width: 70%;
    height: 30px;
    padding-left: 5px;
    border-radius: 5px;
    border: 1px solid #e5e5e5;
  }
  .van-button {
    height: auto;
    line-height: normal;
  }
}
</style>

